<template>
    <div id="details">
        <div>
        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
        <el-form :model="Receiverform" label-position="left" label-width="100px">
                    <el-form-item label="收货人姓名：">
                        <el-input v-model="Receiverform.receiverContact" placeholder="姓名"></el-input>
                    </el-form-item>
                     <el-form-item label="手机号码">
                        <el-input v-model="Receiverform.receiverMobile" placeholder="号码"></el-input>
                    </el-form-item>
                     <el-form-item label="邮政编码">
                        <el-input v-model="Receiverform.postalCode" placeholder="输入订单号"></el-input>
                    </el-form-item>
                    <el-form-item label="活动区域" label-width="100px" style="text-align: left;">
                    <el-select v-model="Receiverform.region1" placeholder="省" style="width:150px; margin-right:20px;">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                    <el-select v-model="Receiverform.region2" placeholder="市" style="width:150px; margin-right:20px;">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                    <el-select v-model="Receiverform.region3" placeholder="区" style="width:150px; margin-right:20px;">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item label="详细地址">
                        <el-input v-model="Receiverform.receiverAddress" placeholder="输入订单号"></el-input>
                    </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelReceiver()">取 消</el-button>
            <el-button type="primary" @click="updateReceiver()">确 定</el-button>
        </div>
        </el-dialog>
        </div>
        <el-container>
        <el-header height="20%" style="margin-bottom:20px" >
            <el-steps :active=Number(orderMap.orderStatus)+1 align-center>
            <el-step title="提交订单" :description=orderMap.createTime  icon="el-icon-check" ></el-step>
            <el-step title="支付订单" :description=orderMap.createTime icon="el-icon-loading" ></el-step>
            <el-step title="平台发货" :description=orderMap.createTime icon="el-icon-loading"></el-step>
             <el-step title="确认收货" :description=orderMap.createTime icon="el-icon-loading"></el-step>
            <el-step title="完成评价" :description=orderMap.createTime icon="el-icon-loading"></el-step>
            </el-steps>
        </el-header>
        <el-main>
        <el-container>
        <el-header style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);padding-top:10px" id="mainHeader">
            <span><el-row>
            <el-button type="primary" @click="openReceiver()">修改收货人信息</el-button>
            <el-button type="primary" v-if="tableData[0].orderStatus<2" @click="updateItem()">修改商品信息</el-button>
            <el-button type="primary" round>修改费用信息</el-button>
            <el-button type="danger" @click="prev()">关闭订单</el-button>
            </el-row></span>
        </el-header>
        <el-main>
            <div class="tablbDetails">
            <p><i class="el-icon-s-flag"></i>基本信息</p>
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                prop="id"
                label="订单编号"
                >
                </el-table-column>
                <el-table-column
                prop="transactionId"
                label="发货单流水号"
                >
                </el-table-column>
                <el-table-column
                prop="username"
                label="用户账号">
                </el-table-column>
                <el-table-column
                prop="payType"
                label="支付方式"
                >微信支付
                </el-table-column>
                <el-table-column
                prop="sourceType"
                label="订单来源"
                >
                </el-table-column>
            </el-table>
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                prop="logisticsId"
                label="配送公司"
                >
                </el-table-column>
                <el-table-column
                label="订单类型"
                >普通订单
                </el-table-column>
                <el-table-column
                prop="shippingCode"
                label="物流单号"
                >
                </el-table-column>
                <el-table-column
                prop="address"
                label="自动确认收货时间">
                 <template slot-scope="scope" v-if="scope.row.takeTimeout">
                        {{scope.row.takeTimeout}}天
                 </template>
                </el-table-column>
                <el-table-column
                label="活动信息"
                >
                </el-table-column>
            </el-table>
            </div>
            <div class="tablbDetails">
            <p><i class="el-icon-s-flag"></i>收货人信息</p>
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                prop="receiverContact"
                label="收货人"
                >
                </el-table-column>
                <el-table-column
                prop="receiverMobile"
                label="手机号码"
                >
                </el-table-column>
                <el-table-column
                prop="postalCode"
                label="邮政编码">
                </el-table-column>
                <el-table-column
                prop="receiverAddress"
                label="收货地址"
                >
                </el-table-column>
            </el-table>
            </div>
            <div class="tablbDetails">
            <p><i class="el-icon-s-flag"></i>商品信息</p>
            <el-table
                :data="tableItemData"
                border
                style="width: 100%">
                <el-table-column
                prop="image"
                label="商品图片">
                <template slot-scope="scope">
                <el-image :src="scope.row.image">
                <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                </div>
                </el-image>
                </template>
                </el-table-column>
                <el-table-column
                prop="name"
                label="商品名称"
                >
                </el-table-column>
                <el-table-column
                label="价格/货号">
                 <template slot-scope="scope">
                    {{scope.row.price}}
                </template>
                </el-table-column>
                <el-table-column
                prop="spec"
                label="属性"
                >
                </el-table-column>
                <el-table-column
                prop="num"
                label="数量"
                >
                </el-table-column>
                <el-table-column
                prop="snum"
                label="库存"
                >
                </el-table-column>
                <el-table-column
                prop="money"
                label="小计"
                >
                </el-table-column>
            </el-table>
            <p style=" text-align: right;">合计: {{tableData[0].totalMoney}}</p>
            </div>
            <div class="tablbDetails">
            <p><i class="el-icon-s-flag"></i>费用信息</p>
            <el-table
               :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                prop="totalMoney"
                label="合计"
                >
                </el-table-column>
                <el-table-column
                prop="postFee"
                label="运费"
                >
                </el-table-column>
                <el-table-column
                label="优惠卷">
                ￥0
                </el-table-column>
                <el-table-column
                label="活动优惠"
                >
                </el-table-column>
            </el-table>
            <el-table
                :data=tableData
                border
                style="width: 100%">
                <el-table-column
                prop="totalMoney"
                width="267px"
                label="订单总金额"
                >
                </el-table-column>
                <el-table-column
                prop="payMoney"
                width="267px"
                label="应付款金额"
                >
                </el-table-column>
            </el-table>
            </div>
            <div class="tablbDetails">
            <p><i class="el-icon-s-flag"></i>操作信息</p>
            <el-table
                :data = tableLogData
                border
                style="width: 100%">
                <el-table-column
                prop="operater"
                label="操作者"
                >
                </el-table-column>
                <el-table-column
                prop="operateTime"
                label="操作时间"
                >
                </el-table-column>
                <el-table-column
                prop="orderStatus"
                label="订单状态">
                </el-table-column>
                <el-table-column
                prop="payStatus"
                label="付款状态"
                >
                </el-table-column>
                <el-table-column
                prop="consignStatus"
                label="发货状态"
                >
                </el-table-column>
                <el-table-column
                prop="remarks"
                label="备注 "
                >
                </el-table-column>
            </el-table>
            </div>
        </el-main>
        </el-container>
        </el-main>
        </el-container>
    </div>
</template>
<script>
export default {
  data () {
    return {
      tableData: [],
      tableLogData: [],
      tableItemData: [],
      orderMap: {},
      dialogFormVisible: false,
      // 对话框表单提交的数据
      Receiverform: {}, // 收货人
      // 对话框大小
      formLabelWidth: '120px'
    }
  },
  methods: {
    // 获取品牌信息列表
    async getfindAll () {
      // 发送请求查询数据并返回
      this.orderMap.orderId = this.$route.query.orderId
      const { data: res } = await this.$http.get(`/orders/order/findById/${this.$route.query.orderId}`)
      const { data: details } = await this.$http.get(`/orders/order/findDetails/${this.$route.query.orderId}`)
      const { data: log } = await this.$http.post('/orders/order/log/findAllList', this.orderMap)
      const { data: item } = await this.$http.post('/orders/order/item/findItem', this.orderMap)
      this.tableData.push(res.data)
      this.tableLogData = log.data
      this.tableItemData = item.data
      this.orderMap = res.data
      this.Receiverform = res.data
      for (let i = 0; i < this.tableData.length; i++) {
        this.tableData[i].takeTimeout = details.data[i].take_timeout
        this.tableData[i].name = details.data[i].name
        for (let j = 0; j < details.data.length; j++) {
        this.tableItemData[j].sn = details.data[j].sn
        this.tableItemData[j].snum = details.data[j].num
        this.tableItemData[j].spec = details.data[j].spec
        }
        console.log(this.tableData.length)
        console.log(details.data[i].spec)
      }
    },
    // 关闭订单
    prev () {
      this.$router.go(-1)
    },
    // 打开修改收货人对话框
    async openReceiver () {
      this.Receiverform = {}
      this.tableData = []
      this.tableLogData = []
      this.tableItemData = []
      this.orderMap = {}
      this.getfindAll()
      this.dialogFormVisible = true
    },
    // 关闭
    cancelReceiver () {
      this.Receiverform = {}
      this.tableData = []
      this.tableLogData = []
      this.tableItemData = []
      this.orderMap = {}
      this.getfindAll()
      this.dialogFormVisible = false
    },
    // 修改收货人信息
    async updateReceiver () {
      const { data: res } = await this.$http.post('/orders/order/updateReceiver', this.Receiverform)
      if (res.code === 200) {
        this.$message({
          type: 'success',
          message: '修改成功'
        })
        this.dialogFormVisible = false
        this.Receiverform = {}
        this.tableData = []
        this.tableLogData = []
        this.tableItemData = []
        this.orderMap = {}
        this.getfindAll()
      }
    },
    // 修改商品信息
    updateItem () {
      this.$router.push({ name: 'OrderModify', query: { orderId: this.$route.query.orderId } })
    }
  },
  // 钩子函数
  async created () {
    this.getfindAll()
  }
}
</script>
<style>
 #details{
    width: 80%;
    margin:0 auto;
 }
 #details .tablbDetails{
    margin:30px
 }
  #details .tablbDetails p{
    text-align: left;
 }
  #itemP{
    text-align: right;
 }
</style>
